<template>
  <VxeGrid v-bind="attrsData" :columns="columns" :toolbarConfig="toolbarConfigCom" :proxyConfig="proxyConfig"
    :pagerConfig="pagerConfigCom" :data="data">
    <!-- 插槽的映射 -->
    <template v-for="(_, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData" />
    </template>
  </VxeGrid>
</template>

<script lang="ts" setup>
import { VxeGrid } from 'vxe-table'
import { useAttrs } from 'vue'
import { assign } from 'fair-wing'
import type { VxeGridProps } from 'vxe-table'

type propMsg = Pick<
  VxeGridProps,
  'data' | 'columns' | 'toolbarConfig' | 'proxyConfig' | 'pagerConfig'
>
const props = withDefaults(defineProps<propMsg>(), {})
const { toolbarConfig, data, columns, proxyConfig } = toRefs(props)

const toolbarConfigCom = computed<VxeGridProps['toolbarConfig']>(() => {
  return assign({}, toolbarConfig.value ?? {}) as VxeGridProps['toolbarConfig']
})
const pagerConfigCom = computed<VxeGridProps['pagerConfig']>(() => {
  return assign(
    {},
    {
      enabled: true,
      pageSize: 15,
    },
    proxyConfig.value ?? {}
  ) as VxeGridProps['pagerConfig']
})
const attrsData = useAttrs()
console.log('attrsData', attrsData, toolbarConfigCom.value)
</script>
